<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
</head>
<body>
	<canvas id="myCanvas"></canvas>
	<!-- <img src="./earth.jpg" style="width: 100px;height: 100px;"> -->
	<div id="canvas-frame"></div>
</body>
<script type="text/javascript" src="http://pogqw1c8i.bkt.clouddn.com/three.min.js"></script>
<script>
    class FlashChart{
        constructor(){
            this.xStep = 10
            this.yStep = 10
            this.allTextArr = []
            this.randomColorNum = 300
            this.defaultColor = '#0EA9FF'
            this.lightColor = '#6487A7'
            this.domeWidth = 1000
            this.domeHeight = 1000
            this.xNum = Math.ceil(this.domeWidth/this.xStep)
            this.allTextNum = this.xNum * Math.ceil(this.domeHeight/this.yStep)
            this.lightArr = []
            this.timer
            this.colorArr = [['#FFDEAD','#FAEBD7'],['#FDF5E6','#EEEE00'],['#CD2990','#CDBA96']]
            this.colorRandomMap = {}
            console.log(this.allTextNum,'12')
        }
        static a(){

        }
        getRandomChart(){
	    	const num = Math.ceil(Math.random() * 108);
	        let result
	        if(num < 27){
	        	 result = String.fromCharCode(65+num)
	        }else if(num < 68){
	            result = 0
	        }else{
	            result = 1
	        }
        	this.allTextArr.push({value:result})
    	}
	    getChartPosition(i) {
	        const x = (this.allTextArr.length - 1) % this.xNum *  this.xStep
	        const y = Math.floor(this.allTextArr.length/this.xNum) * this.yStep
	        this.allTextArr[i].x = x
	        this.allTextArr[i].y = y
	    }
	    getRandomColor() {
	    	this.lightArr = []
	    	this.colorRandomMap = {}
	        let len = this.allTextArr.length
	    	let randomeNum
	        for(let i = 0 ; i < this.randomColorNum ;i++){
	        	randomeNum = Math.floor(Math.random() * len)
	        	this.colorRandomMap[randomeNum] = this.colorArr[Math.floor(Math.random() * this.colorArr.length)]
	        	this.lightArr.push(randomeNum)
	        }
	    }
	    isInRandomArr(index){
	    	for(let i = 0 ; i < this.lightArr.length ;i++){
	    		if(index === this.lightArr[i]){
	    			return true
	    		}
	    	}
	    	return false
	    }
	    run() {
	        var canvas = document.getElementById('myCanvas');
	        canvas.style.height = this.domeHeight + 'px'
	        canvas.style.width = this.domeWidth + 'px'
	        var _this = this
	        canvas.width = this.domeWidth;
	        canvas.height = this.domeHeight;
	        var context = canvas.getContext('2d');
	        context.font = 'bold 10px Arial';
	        context.textAlign = 'center';
	        function appendTextRandom() {
	            context.clearRect(0, 0, canvas.width, canvas.height);


	            //这里分2部分，一部分渲染有背景颜色的点，另一部分渲染普通的点

	            // 绘制填充矩形
	            _this.lightArr.forEach(row => {
					context.fillStyle = _this.colorRandomMap[row][0]
	            	context.fillRect(_this.allTextArr[row].x - _this.xStep/2, _this.allTextArr[row].y - _this.yStep + 2,_this.xStep,_this.yStep)
	            	context.fillStyle = _this.colorRandomMap[row][1]
	            	context.fillText(_this.allTextArr[row].value, _this.allTextArr[row].x, _this.allTextArr[row].y);
	            })


	            //绘制普通文字
	            context.fillStyle = _this.defaultColor
	            for(let i = 0 ; i < _this.allTextArr.length ;i++){
	            	if(!_this.isInRandomArr(i)){
	            		context.fillText(_this.allTextArr[i].value, _this.allTextArr[i].x, _this.allTextArr[i].y);
	            	}
	            }
	            context.fill()


	             // 设置一个渐变背景
	            var grad=context.createRadialGradient(_this.domeWidth/2,_this.domeHeight/2,_this.domeHeight/2 * 0.1,_this.domeWidth/2,_this.domeHeight/2,_this.domeWidth/1.8) //创建一个渐变色线性对象
	            grad.addColorStop(1,"rgba(0,0,0,0.8)");
				grad.addColorStop(0,"rgba(255,255,255,0.2)");

				context.fillStyle=grad;
				context.fillRect(0,0,canvas.width, canvas.height);
				context.fill()



	            _this.allTextArr.forEach(row => {
	                row.y += 3
	                if(row.y >= canvas.height){
	                    row.y = 0
	                }
	            })
	            window.requestAnimationFrame(appendTextRandom);
	        }
	        appendTextRandom()
	    }
	    initFun() {
	        for(let i = 0 ; i < this.allTextNum ;i++){
	            this.getRandomChart()
	            this.getChartPosition(i)
	        }
	        this.getRandomColor()
	        //定时修改背景变色的数据
	        var _this = this
			this.timer = setInterval(function(){
				_this.getRandomColor()
			},500)
	        this.run()
	    }
   }

   var flashChart = new FlashChart()
   flashChart.initFun()


   function createEarth(){
   	var renderer, camera, scene;//渲染器，相加，场景
            var Earth, satellites = [];//地球，卫星（数组）

            function initThree() {
                var dom = document.getElementById("canvas-frame");
                const clientWidth = 700,clientHeight = 500
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(20, clientWidth / clientHeight, 1, 1000);
                camera.position.set(0, 0, 400);//设置相机位置
                renderer = new THREE.WebGLRenderer({
                    alpha: true,
                    antialias: true
                });
                renderer.setSize(clientWidth, clientHeight);//设置窗口尺寸
                dom.appendChild(renderer.domElement);

                const sunTexture = THREE.ImageUtils.loadTexture('http://pogqw1c8i.bkt.clouddn.com/earth.jpg', {}, function () {
                    renderer.render(scene, camera);
                });

                //地球
                Earth = new THREE.Mesh(new THREE.SphereGeometry(70, 30, 30), new THREE.MeshBasicMaterial({
                    map: sunTexture
                })); //材质设定

                const satellite = new THREE.Sprite(new THREE.SpriteMaterial({
                    map: new THREE.CanvasTexture(generateSprite('196,233,255')),
                    blending: THREE.AdditiveBlending
                }));
                satellite.scale.x = satellite.scale.y = satellite.scale.z = 60;
                scene.add(satellite);//添加发光,让地球有发光的样式
                scene.add(Earth);

                //添加卫星
                for(let i = 0 ; i < 8 ;i++){
                    satellites.push(initSatellite(15, 88, {x: -Math.PI * 0.45, y: Math.PI * 0.1, z: Math.PI * 0.25 * i}, -0.031, scene,i + 1));
                }
                // satellites.push(initSatellite(5, 48, {x: -Math.PI * 0.45, y: Math.PI * 0.15, z: 1.5}, -0.031, scene));
                // satellites.push(initSatellite(5, 48, {x: -Math.PI * 0.45, y: Math.PI * 0.15, z: 2.5}, -0.031, scene));

                render();

            }


            /**
             * 返回一个卫星和轨道的组合体
             * @param satelliteSize 卫星的大小
             * @param satelliteRadius 卫星的旋转半径
             * @param rotation 组合体的x,y,z三个方向的旋转角度
             * @param speed 卫星运动速度
             * @param scene 场景
             * @param path 图片路径
             * @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度
             */
            const initSatellite = function (satelliteSize, satelliteRadius, rotation, speed, scene , path) {

                const track = new THREE.Mesh(new THREE.RingGeometry(satelliteRadius, satelliteRadius + 1.15, 5000, 1), new THREE.MeshBasicMaterial({color:0xff0EA9FF}));
                console.log(track,'tack')
                const centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
                const satellite = new THREE.Sprite(new THREE.SpriteMaterial({
                    map: THREE.ImageUtils.loadTexture('http://pogqw1c8i.bkt.clouddn.com/' + path + '.png'),
                    blending: THREE.AdditiveBlending
                }));
                satellite.scale.x = satellite.scale.y = satellite.scale.z = satelliteSize;
                satellite.position.set(satelliteRadius, 0, 0);

                let pivotPoint = new THREE.Object3D();
                pivotPoint.add(track);
                pivotPoint.add(satellite);
                centerMesh.add(pivotPoint);
                centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);
                scene.add(centerMesh);
                return {satellite: centerMesh, speed: speed};
            };

            /**
             * 实现发光星星
             * @param color 颜色的r,g和b值,比如：“123,123,123”;
             * @returns {Element} 返回canvas对象
             */
            const generateSprite = function (color) {
                let canvas = document.createElement('canvas');
                canvas.width = 16;
                canvas.height = 16;
                const context = canvas.getContext('2d');
                const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
                gradient.addColorStop(0, 'rgba(' + color + ',1)');
                gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
                gradient.addColorStop(0.4, 'rgba(' + color + ',.6)');
                gradient.addColorStop(1, 'rgba(0,0,0,0)');
                context.fillStyle = gradient;
                context.fillRect(0, 0, canvas.width, canvas.height);
                return canvas
            };


            function render() {
                renderer.render(scene, camera);
                Earth.rotation.y += 0.01;
                for (let i = 0; i < satellites.length; i++) {
                    satellites[i].satellite.rotation.z -= satellites[i].speed;
                }
                requestAnimationFrame(render);
            }
      	initThree()
   }
   createEarth()

</script>

<style lang="scss">
    #myCanvas {
        width: 1000px;
        height: 625px;
    }
    #canvas-frame{
    	width: 700px;
    	height: 500px;
    	position: absolute;
    	top:0;
    }
    .sell-cat {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        .seller-info {
            margin: 40px 0;
            .title {
                font-size: 20px;
                margin-bottom: 20px;
                font-weight: bold;
            }
            .content {
                font-weight: 400;
                font-style: normal;
                font-size: 13px;
                color: #333333;
            }
        }
    }
</style>
</html>
